<template>
  <div class="contract-wrap flx-column">
    <el-tabs v-model="currentType" type="card">
      <el-tab-pane
        :label="item.name"
        :name="item.id"
        v-for="(item, index) in tabsList"
        :key="index"
        @change="currentType = item.id"
      ></el-tab-pane>
    </el-tabs>

    <el-scrollbar class="contract-list" style="height: calc(100% - 56px)">
      <div class="item" v-for="(item, index) in 10" :key="index">
        <div class="header flx-justify-between">
          <div class="left flx-align-center">
            <div class="label">
              <div class="number">合同编号：</div>
              <div class="value">HT202404031200</div>
              <el-icon class="pointer" color="#3370FF" v-copy="item"><DocumentCopy /></el-icon>
            </div>
            <div class="label">
              <div class="number">合同名称：</div>
              <div class="value">北凉商标注册合同</div>
              <el-icon class="pointer" color="#3370FF" v-copy="item"><DocumentCopy /></el-icon>
            </div>
          </div>
          <el-tag type="success">审核通过</el-tag>
        </div>
        <div class="content flx">
          <div class="content-item">
            <div class="block">
              <div class="label">阶段状态：</div>
              <div class="value">合同首款</div>
            </div>
            <div class="block">
              <div class="label">委托人甲方：</div>
              <div class="value">北粮农业股份有限公司</div>
            </div>
          </div>
          <div class="content-item">
            <div class="block">
              <div class="label">合同金额：</div>
              <div class="value text-primary">3600.00元</div>
            </div>
            <div class="block">
              <div class="label">到账金额：</div>
              <div class="value text-warning">3600.00元</div>
            </div>
          </div>
          <div class="content-item">
            <div class="block">
              <div class="label">更新时间：</div>
              <div class="value">2024-04-11 13:09</div>
            </div>
            <div class="block">
              <div class="label">签署文件：</div>
              <div class="value">
                <el-button type="primary" link @click="openFile(item)">签署文件.pdf</el-button>
              </div>
            </div>
          </div>
        </div>
        <div class="flx-justify-end mb-12 mr-12">
          <el-button type="primary" link @click="openBusinessContracts">业务合同(3)</el-button>
          <el-button type="primary" link @click="openUpload">上传签署文件</el-button>
          <el-button type="primary" link @click="downloadFile(item)">下载</el-button>
          <el-button type="primary" link @click="openDrawerCreateContract">编辑</el-button>
          <el-button type="danger" link @click="delContract(item)">删除</el-button>
        </div>
      </div>
    </el-scrollbar>
  </div>

  <!-- 业务合同 -->
  <business-contracts ref="businessContractsRef"></business-contracts>

  <!-- 上传签署文件 -->
  <upload-signed-documents ref="uploadSignedDocumentsRef"></upload-signed-documents>

  <!-- 编辑合同 -->
  <create-contract ref="createContractRef"></create-contract>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import BusinessContracts from "./components/BusinessContracts.vue";
import UploadSignedDocuments from "./components/UploadSignedDocuments.vue";
import CreateContract from "../CreateContract/index.vue";
import { useHandleData } from "@/hooks/useHandleData";
import { useFileDownload } from "@/hooks/useDownload";

const currentType = ref("");
const tabsList = [
  { id: "", name: "全部" },
  { id: "1", name: "审核通过" },
  { id: "2", name: "待审核" },
  { id: "3", name: "审核拒绝" },
  { id: "4", name: "草稿箱" }
];

// 查看业务合同
const businessContractsRef = ref();
const openBusinessContracts = () => {
  businessContractsRef.value.acceptParams({
    title: "北京商标注册合同-业务(2)",
    id: 1
  });
};

// 上传签署文件
const uploadSignedDocumentsRef = ref();
const openUpload = () => {
  uploadSignedDocumentsRef.value.acceptParams({
    id: 1
  });
};

// 打开编辑页
const createContractRef = ref();
const openDrawerCreateContract = () => {
  const params = {
    title: "编辑合同",
    params: {}
  };
  createContractRef.value.acceptParams(params);
};

// 删除合同
const delT = () => {
  return new Promise(resolve => {
    return resolve({});
  });
};
const delContract = async row => {
  await useHandleData(delT, { id: row.id }, `是否确定删除此合同`);
};

// 下载
const downloadFile = row => {
  useFileDownload(row.file);
};

const openFile = row => {
  window.open(row.url, "_blank");
};
</script>

<style lang="scss" scoped>
.contract-list {
  .item {
    border: 1px solid #ebeef5;
    border-radius: 4px;
    margin-bottom: 12px;

    .header {
      background: #f5f7fa;
      height: 46px;
      padding: 0 10px;

      .number {
        color: #909399;
      }

      .label {
        display: flex;
        align-items: center;
        margin-right: 17px;

        .value {
          margin-right: 5px;
        }
      }
    }

    .content {
      padding: 12px;

      .content-item {
        width: 300px;
        margin-right: 12px;

        .label {
          color: #909399;
        }

        &:nth-child(2) {
          width: 220px;
        }
      }
      .block {
        display: flex;
        align-items: center;

        &:nth-child(1) {
          margin-bottom: 4px;
        }
      }
    }
  }
}
</style>
